import React from 'react'
import {
    HeaderWrapper, Logo, Nav, NavItem,
    NavSearch, Wirtting, SearchWrap,
    SearchInfo, SearchChange, SearchList, SearchItem, SearchTitle
} from "./style"
import { CSSTransition } from "react-transition-group"
import { connect } from "react-redux"
import { action } from "./store"
import { action as loginAction } from "../../views/login/store"
import { Link } from 'react-router-dom'



class Header extends React.Component {

    showSearchInfo = () => {
        const token = localStorage.getItem("user_token");
        const { focused, list, page, changeSearchInfoPages, mouseIn, handleMoveIn, handleMoveOut } = this.props;
        const newList = list.toJS();
        const pageList = [];
        if (newList.length !== 0) {
            for (let i = page * 10; i < (page + 1) * 10; i++) {
                if (i === newList.length) {
                    break;
                }
                pageList.push(
                    <SearchItem key={newList[i] ? newList[i] : i}>{newList[i] ? newList[i] : "123"}</SearchItem>
                )
            }
        }
        if (focused || mouseIn) {
            return (
                <SearchInfo
                    onMouseEnter={handleMoveIn}
                    onMouseLeave={handleMoveOut}
                >
                    <SearchTitle>
                        热门搜索
                        {token}
                        <SearchChange onClick={() => { changeSearchInfoPages(this.icon) }}>
                            <span ref={(icon) => { this.icon = icon }} className="iconfont spin"> &#xe83c;</span>
                            换一换</SearchChange>
                    </SearchTitle>
                    <SearchList>
                        {pageList}
                    </SearchList>
                </SearchInfo>
            )
        } else {
            return null;
        }
    }


    render() {
        const { focused, handleFocus, handleBlur, list, logOut, findUser, getCourses,login } = this.props
        // const login = localStorage.getItem("user_token");

        return (
            <HeaderWrapper>
                <Link to="/">
                    <Logo />
                </Link>
                <Nav>
                    <NavItem className="left active">首页</NavItem>
                    <NavItem className="left" onClick={getCourses}>下载App</NavItem>
                    <NavItem className="right reg">注册</NavItem>
                    {login ?
                        <NavItem onClick={logOut} className="right">退出</NavItem> :
                        <Link to="/login"><NavItem className="right">登录</NavItem></Link>
                    }
                    <NavItem className="right" onClick={findUser}>Aa</NavItem>
                    <SearchWrap>
                        <CSSTransition timeout={200} in={focused} classNames="fade" >
                            <NavSearch className={focused ? "focused" : ""} onBlur={handleBlur} onFocus={() => handleFocus(list)}></NavSearch>
                        </CSSTransition>
                        <span className={focused ? "iconfont focused zoom" : "iconfont zoom"}>&#xe627;</span>
                        {this.showSearchInfo()}
                    </SearchWrap>
                </Nav>
                <Link to="/write">
                    <Wirtting>
                        <span className="iconfont">&#xe602;</span>
                        写文章
                    </Wirtting>
                </Link>
            </HeaderWrapper>
        )
    }
}


const mapState = (state) => ({
    // focused: state.get("header").get("focused")
    focused: state.getIn(["header", "focused"]),
    mouseIn: state.getIn(["header", "mouseIn"]),
    list: state.getIn(["header", "list"]),
    page: state.getIn(["header", "currentPage"]),
    login: state.getIn(["login", "login"])
})
const mapMethod = (dispatch) => {
    return {
        handleBlur() {
            dispatch(action.handleSearchOnblur())
        },
        handleFocus(list) {
            (list.size === 0) && dispatch(action.getSearchInfoAsyn())
            dispatch(action.handleSearchFocus())
        },
        handleMoveIn() {
            dispatch(action.handleMoveIn())
        },
        handleMoveOut() {
            dispatch(action.handleMoveOut())
        },
        changeSearchInfoPages(icon) {
            let originAngle = icon.style.transform.replace(/[^0-9/]/ig, "")
            if (originAngle) {
                originAngle = parseInt(originAngle, 10)
            } else {
                originAngle = 0
            }

            icon.style.transform = 'rotate(' + (originAngle + 360) + 'deg)';
            dispatch(action.changePages())
        },
        logOut() {
            dispatch(loginAction.logoutAsyn())
        },
        findUser() {
            dispatch(action.findUser())
        },
        getCourses(){
            dispatch(action.getCourses())
        }

    }
}
export default connect(mapState, mapMethod)(Header)
